<!-- Dom模板 -->
<template>
  <div class="subscriber">
    <div class="header">
      <ul>
        <li>
          <span>用户名称:</span>
          <input type="text" placeholder="请输入角色名称" ref="uname" />
        </li>
        <li>
          <span>账号:</span>
          <input type="text" placeholder="请输入账号" ref="wx" />
        </li>
        <li>
          <span>性别:</span>
          <select ref="sex">
            <option value="全部">全部</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </li>
        <li>
          <span>身份:</span>
          <select ref="identity">
            <option value="全部">全部</option>
            <option value="群众">群众</option>
            <option value="党员">党员</option>
          </select>
        </li>
        <li>
          <span>状态:</span>
          <select ref="state">
            <option value="全部">全部</option>
            <option value="启用">已启用</option>
            <option value="停用">已停用</option>
          </select>
        </li>
        <li>
          <button @click="searchUser">搜索</button>
          <button @click="getUser">重置</button>
        </li>
      </ul>
    </div>
    <div class="option">
      <button>停用</button>
      <button>删除</button>
      <button>导出</button>
    </div>
    <table cellspacing="0">
      <thead>
        <tr>
          <th>
            <input type="checkbox" />
            <span>序号</span>
          </th>
          <th>用户名称</th>
          <th>微信号</th>
          <th>手机号</th>
          <th>性别</th>
          <th>身份</th>
          <th>活动积分</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in subscribeList" :key="item.id">
          <td>
            <input type="checkbox" />
            <span>{{ item.id }}</span>
          </td>
          <td>{{ item.uname }}</td>
          <td>{{ item.wx }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.sex === "0" ? "男" : "女" }}</td>
          <td>{{ item.identity }}</td>
          <td>{{ item.integral }}</td>
          <td>已{{ item.state }}</td>
          <td cid="2">
            <span @click="edit(item)">修改</span>
            <span @click="editState(item.id)">{{
              item.state == "停用" ? "启用" : "停用"
            }}</span>
            <span @click="deleteUser(item.id)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
    <EditUser
      v-show="isShow"
      v-model="isShow"
      :groupItem="groupItem"
    ></EditUser>
  </div>
</template>

<script>
import EditUser from "./EditUser/index";
import * as API from "../../api/getdata";
export default {
  name: "",
  components: {
    EditUser,
  },
  data() {
    return {
      subscribeList: [],
      isShow: false,
      groupItem: {},
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  beforeMount() {},
  mounted() {
    API.getUser().then((res) => {
      console.log(res);
      this.subscribeList = res.data;
    });
  },
  updated() {
    // API.getUser().then((res) => {
    //   this.subscribeList = res;
    // });
  },
  // Vue方法定义
  methods: {
    edit(item) {
      this.groupItem = item;
      this.isShow = true;
    },
    editState(id) {
      API.editstate({
        id: id,
        state: this.groupItem.state === "启用" ? "停用" : "启用",
      });
      API.getUser().then((res) => {
        this.subscribeList = res.data
      });
    },
    deleteUser(id) {
      console.log(id);
      API.deleteUser({
        id: id,
      })
    },
    searchUser() {
      API.searchUser({
        uname: this.$refs["uname"].value,
        wx: this.$refs["wx"].value,
        sex: this.$refs["sex"].value === "男" ? "0" : "1",
        identity: this.$refs["identity"].value,
        state: this.$refs["state"].value,
      }).then((res) => {
        this.subscribeList = res.data;
      });
    },
    getUser() {
      API.getUser().then((res) => {
        this.subscribeList = res.data;
      });
    },
  },
};
</script>

<style scoped>
.subscriber {
  width: 100%;
  padding: 25px;
}
.header {
  width: 100%;
}
.header > ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.header > ul > li > span {
  margin: 0 10px;
}
.header > ul > li input {
  outline: none;
  border: none;
  width: 180px;
  height: 40px;
  border: 1px solid #5597f9;
  padding: 0 10px;
  color: rgb(167, 164, 164);
}
.header > ul > li select {
  outline: none;
  border: none;
  width: 184px;
  height: 40px;
  border: 1px solid #5597f9;
}
.header > ul > li button {
  width: 97px;
  height: 39px;
  outline: none;
  border: none;
  margin: 0px 5px;
  color: #fff;
}
.header > ul > li button:first-child {
  background-color: #3894ff;
}
.header > ul > li button:last-child {
  background-color: #e29836;
}
.option {
  margin: 20px 0;
}
.option > button {
  width: 97px;
  height: 39px;
  outline: none;
  border: none;
  margin: 0px 5px;
  color: #fff;
}
.option > button:nth-child(1) {
  background-color: #e29836;
}
.option > button:nth-child(2) {
  background-color: #ef4545;
}
.option > button:nth-child(3) {
  background-color: #3894ff;
}
table {
  width: 100%;
}
table > thead {
  background-color: rgb(224, 217, 217);
}
table th,
td {
  padding: 15px 0;
}
table th:nth-child(1),
td:nth-child(1) {
  width: 77px;
}
table input {
  margin: 0px 15px;
}
table th:nth-child(2),
td:nth-child(2) {
  width: 154px;
}
table th:nth-child(3),
td:nth-child(3) {
  width: 218px;
}
table th:nth-child(4),
td:nth-child(4) {
  width: 218px;
}
table th:nth-child(5),
td:nth-child(5) {
  width: 234px;
}
table th:nth-child(6),
td:nth-child(6) {
  width: 125px;
}
table th:nth-child(7),
td:nth-child(7) {
  width: 125px;
}
table th:nth-child(8),
td:nth-child(8) {
  width: 125px;
}
table th:nth-child(9),
td:nth-child(9) {
  width: 303px;
}
table td {
  text-align: center;
}
table td > span {
  margin: 0 10px;
}
</style>